<html>

<head>
    <meta charset="utf-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="vue.js"></script>
    <link crossorigin="anonymous" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
        href="https://lib.baomitu.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <style>


    </style>

</head>

<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">

                <label>
                    Id:
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    Name:
                    <input type="text" class="form-control" v-model="name" @keyup.f2="add">
                    <!-- keyboard 113 = F2 //.enter -->
                </label>
                <input type="button" value="添加" class="btn btn-primary" @click="add">
                <label>
                    keyword:
                    <!-- 所有的指令都以 v-开头 -->
                    <input type="text" class="form-control" v-model="keyword" id="search" v-focus>
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="item in search(keyword)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{item.ctime | dataFormat('')}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="app2">
        <h3>{{dt | dataFormat('')}}</h3>
    </div>
    <script>
        //全局过滤器
        //所有vm实例都共享
        Vue.filter('dataFormat', function (dateStr, pattern) {
            var dt = new Date(dateStr)

            //yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            //   return y+ '-' + m + '-' + d

            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                var h = dt.getHours()
                var mm = dt.getMinutes()
                var s = dt.getSeconds()

                return `${y}-${m}-${d} ${h}:${mm}:${s}`
            }

        });

        //自定义全局按键修饰符
        Vue.config.keyCodes.f2 = 113

        // document.getElementById('search').focus()
        //使用 Vue.directive() 定义全局的指令
        //其中：参数1：指令的名称，注意在定义的时候，指令的名称前面，不需要加 v-前缀 。在调用的时候要加 v-
        //参数2，对象 指令相关函数。特定阶段执行操作
        Vue.directive('focus',{
            //当绑定元素插入到DOM中
            //bind / inserted / update
            inserted:function(el){
                el.focus()
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: 0,
                name: '',
                keyword: '',
                list: [
                    { id: 1, name: '宝马', ctime: new Date() },
                    { id: 2, name: '奔驰', ctime: new Date() },

                ],


            },
            methods: {


                add() {
                    console.log('这里触发了 btn的点击事件')
                    // this.list4.push({id:this.id,name:this.name})   
                    this.list.push({ id: this.id, name: this.name, ctime: new Date() })
                    this.id = this.name = ''
                },

                del(id) {
                    console.log('这里触发了 del')
                    //找到数组后用splice删除


                    // this.list.some((item, i) => {
                    //     if (item.id == id) {
                    //         this.list.splice(i,1)
                    //         return true
                    //     }
                    // })

                    var index = this.list.findIndex(item => {
                        if (item.id == id) {

                            return true
                        }
                    })

                    this.list.splice(index, 1)

                },

                search(keyword) {
                    //  var newList = []
                    // this.list.forEach(item => {
                    //     if(item.name.indexOf(keyword) != -1){
                    //         newList.push(item) 
                    //     }
                    // });
                    //return newList

                    return newList = this.list.filter(item => {
                        if (item.name.includes(keyword)) {
                            return item
                        }

                    })

                },

            },
        })

        var vm2 = new Vue({
            el: '#app2',
            data: {
                dt: new Date(),
            },
            methods: {},
            filters: { //定义私有过滤器 [过滤器名称和处理函数]
            //过滤器调用，采用就近原则
                dataFormat: function (dateStr, pattern) {
                    var dt = new Date(dateStr)

                    //yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2,'0')
                    var d = dt.getDate().toString().padStart(2,'0')

                    //   return y+ '-' + m + '-' + d

                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        var h = dt.getHours().toString().padStart(2,'0')
                        var mm = dt.getMinutes().toString().padStart(2,'0')
                        var s = dt.getSeconds().toString().padStart(2,'0')

                        return `${y}-${m}-${d} ${h}:${mm}:${s}`

                    }
                }
                }
            })

            

    </script>
</body>


</html>